{% extends "hs-base.html" %}


{% block div %}

    <div id="serverForm" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="card-box modal-content">
                                                <div class="modal-header">
                                                    <h4 class="modal-title" id="Formtitle">新增环境信息</h4>
                                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                                </div>

                                                <div class="modal-body">
                                                    <p class="text-muted font-14 m-b-20">请在下方填写环境相关信息</p>

                                                    <form action="#" method="post">

                                                        <div class="form-group">
                                                <label>环境名称</label><br>
                                                <div>
                                                    <input type="text" id="serverName" name="serverName" class="form-control" required
                                                           data-parsley-minlength="6" placeholder="例：XX环境"/>
                                                </div>
                                            </div>
                                                        <div class="form-group">
                                                <label>虚拟机名称</label><br>
                                                <div>
                                                    <input type="text" id="vmwareName" name="vmwareName" class="form-control" required
                                                           data-parsley-minlength="6" placeholder="例：V-02-02-00489"/>
                                                </div>
                                            </div>
                                                        <div class="form-group">
                                                <label>环境地址</label>
                                                <div>
                                                    <input type="text" id="serverAddress" name="serverAddress" class="form-control" required
                                                           data-parsley-maxlength="6" placeholder="例：120.0.0.1"/>
                                                </div>
                                            </div>
                                                        <div class="form-group">
                                                <label>环境端口</label>
                                                <div>
                                                    <input type="text" name="serverPort" class="form-control" required
                                                           data-parsley-length="[5,10]"
                                                           placeholder="例：5212"/>
                                                </div>
                                            </div>
                                                        <div class="form-group">
                                                <label>所属小组</label>
                                                <div>
                                                    <select class="form-control select2" name="group">
                                                        <option> 请选择 </option>
                                                        {% for group in group_lists %}
                                                            <option value={{ group[0] }}> {{ group[0] }} </option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                            </div>

                                                        <div class="form-group">
                                                <label>环境类别</label>
                                                <div>
                                                    <select class="form-control select2" name="serverType">
                                                        <option> 请选择 </option>
                                                        <option value="中间件"> 中间件 </option>
                                                        <option value="BOP"> 产研 </option>
                                                        <option value="数据库"> 数据库 </option>
                                                    </select>
                                                </div>
                                            </div>
                                                        <div class="form-group">
                                                <label>账号</label>
                                                <div>
                                                    <input type="text" name="serverUser" class="form-control" required
                                                           data-parsley-max="6" placeholder="例：root"/>
                                                </div>
                                            </div>
                                                        <div class="form-group">
                                                <label>密码</label>
                                                <div>
                                                    <input class="form-control" name="serverPassword" required type="text" min="6"
                                                           max="100" placeholder="例：*********"/>
                                                </div>
                                            </div>
                                                        <div class="form-group">
                                                <label>备注</label>
                                                <div>
                                                    <input type="text" name="remark" class="form-control" required
                                                           data-parsley-max="6" placeholder="例：xx测试组xx环境的中间件"/>
                                                </div>
                                            </div>
                                                    <div class="form-group">
                                                <label>机器配置</label>
                                                <div>
                                                    <input type="text" name="server_config" class="form-control" required
                                                           data-parsley-max="6" placeholder="例：客户机操作系统：Red Hat "/>
                                                </div>
                                            </div>
                                                        <div class="form-group m-b-0">
                                            </div>
                                                        <br>
                                                        <button type="submit" class="btn btn-custom waves-effect waves-light">
                                                        确定
                                                    </button>
                                                    <button type="button" data-dismiss="modal" class="btn btn-default btn-light waves-effect m-l-5">
                                                        关闭
                                                    </button>
                                                    </form>
                                                </div>



                                </div>
                                        </div><!-- /.modal-dialog -->
                                    </div><!-- /.modal -->


    <div class="content">
                    <div class="container-fluid">

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="card-box">
                                    <h4 class="m-t-0 header-title">新增环境</h4>
                                    <p class="text-muted m-b-30 font-13">
                                        新增一条环境信息
                                    </p>

                                    <div class="mb-3">
                                        <div class="row">
                                            <div class="col-12 text-sm-center form-inline">
                                                <div class="form-group mr-2">
                                                    <button id="new_add" data-toggle="modal" data-target="#serverForm"  class="btn btn-primary">新增 </button>

                                                </div>

                                                <div class="form-group">
                                                    <input id="demo-foo-search2" type="text" placeholder="Search" class="form-control" autocomplete="off">
                                                </div>
                                            </div>
                                        </div>
                                        <!-- end col -->
                                    </div>

                                    <table id="demo-foo-row-toggler" class="table table-striped table-bordered m-b-0 toggle-circle" data-page-size="7">
                                        <thead>
                                        <tr>
                                            {% if hs_current_user == "刁盎然" %}
                                                <th data-sort-ignore="true" class="min-width"></th>
                                            {% endif %}
                                            <th data-sort-initial="true" data-toggle="true">环境名称</th>
                                            <th>环境类别</th>
                                            <th data-hide="phone">环境地址和端口</th>
                                            <th data-hide="phone, tablet">创建日期</th>
                                            <th data-hide="phone, tablet">创建人</th>
                                            <th data-hide="phone, tablet">修改日期及修改人</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% for server_list in server_lists %}
                                            <tr>
                                                {% if hs_current_user == "刁盎然" %}
                                                    <td class="text-center"><button id="{{ server_list[6] }}" onclick="deleteSever(this)" class="btn btn-danger btn-sm btn-icon"><i class="fa fa-times"></i></button></td>
                                                {% endif %}
                                                <td class="footable-visible footable-first-column">{{ server_list[0] }}</td>
                                                <td>{{ server_list[1] }}</td>
                                                <td>{{ server_list[2] }}:{{ server_list[3] }}</td>
                                                <td>{{ server_list[4] }}</td>
                                                <td>{{ server_list[5] }}</td>
                                                <td>{{ server_list[7] }} {{ server_list[8] }}</td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                        <tfoot>
                                        <tr class="active">
                                            <td colspan="7">
                                                <div class="text-right">
                                                    <ul class="pagination pagination-split justify-content-end footable-pagination m-t-10"></ul>
                                                </div>
                                            </td>
                                        </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                                </div>
                            </div><!-- end col -->
                        </div>
                        <!-- end row -->

                    </div> <!-- container -->

                </div>

{% endblock %}


{% block script %}
    <script type="text/javascript">

        function deleteSever(obj) {
            var getId = {id_num : obj.id,fun : 'deleteform'}
            if(confirm("确定删除吗？")){
                $.ajax({
                type:'POST',
                data:getId,
                success:function () {
                    window.location.reload();
                },
                error:function (e) {
                    alert("删除失败")

                }

                })
            }




        }
    </script>
{% endblock %}